Zooming
A fairly common requirement with the sorts of applications that use jsPlumb is the ability to zoom in and out. As of release 1.5.0 there is a way to do this for browsers that support CSS3 (meaning, essentially, everything except IE < 9).
Changing zoom requires that you do two things:
- Set a
transform
property on an appropriate container - Tell jsPlumb what the zoom level is.
Container
You need to identify some element that is the parent of all of your nodes and the jsPlumb artefacts. This is probably fairly obvious. What you might not know about, though, is the Container
concept in jsPlumb. If you don't, I'd encourage you to go read this page just quickly, because the best thing to do is to correctly configure a Container
and then manipulate the transform
property of that element.
Let's say we have some div
called drawing
, and we're going to use that as the Container
:
jsPlumb.Defaults.Container = $("#drawing");
CSS transform
property
Now to set the zoom to 0.75, say, we change the transform
property accordingly. Remember that transform
is one of those properties that have several vendor prefix versions, so there are several ways to do what I've got here, and, given that you're probably a computer programmer, you've most likely got a favourite. But anyway, here's something.
$("#drawing").css({
"-webkit-transform","scale(0.75)",
"-moz-transform","scale(0.75)",
"-ms-transform","scale(0.75)",
"-o-transform","scale(0.75)",
"transform","scale(0.75)"
});
jsPlumb.setZoom
You now need to tell jsPlumb about the new zoom level:
jsPlumb.setZoom(0.75);
A Helper Function
If you're using jQuery, maybe you'd like to just grab this:
var setZoom = function(z, el) {
var p = [ "-webkit-", "-moz-", "-ms-", "-o-", "" ],
s = "scale(" + z + ")";
for (var i = 0; i < p.length; i++)
el.css(p[i] + "transform", s);
jsPlumb.setZoom(z);
};